import { get } from 'lodash-es'

import { useCascaderStore } from '../../hooks/useCascaderStore'
import type { CascaderDiff } from '../../types/cascader'
const ArrowRight = (
  <svg width="25" height="8" viewBox="0 0 25 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="&#232;&#153;&#154;&#231;&#186;&#191;" d="M24.3536 4.35349C24.5488 4.15823 24.5488 3.84165 24.3536 3.64638L21.1716 0.464417C20.9763 0.269156 20.6597 0.269157 20.4645 0.46442C20.2692 0.659683 20.2692 0.976265 20.4645 1.17153L23.2929 3.99994L20.4645 6.82838C20.2692 7.02364 20.2692 7.34023 20.4645 7.53549C20.6597 7.73075 20.9763 7.73075 21.1716 7.53548L24.3536 4.35349ZM2.08333e-06 4.50004L24 4.49994L24 3.49994L-2.08333e-06 3.50004L2.08333e-06 4.50004Z" fill="#8F959E" />
  </svg>

)

export const ChangedDescription = defineComponent({
  props: {
    record: {
      type: Object as PropType<CascaderDiff>,
      required: true
    }
  },
  setup({ record }) {
    const { nodesMap, regionsMap } = useCascaderStore()
    const node = get(nodesMap.value, record.node)
    const source = get(regionsMap.value, record.source.region)
    return () => {
      if (record.diffType === 'LEVEL') {
        return (
          <div class="changed-description is-level">
            <div>【{node?.node_name}】</div>
            <div>{source?.region_name}</div>
            <div class="changed-content">
              <span>L{record?.source?.level}</span>
              <ArrowRight class='mx-2' />
              <span>L{record?.to?.level}</span>
            </div>
          </div>
        )
      }
      if (['REGION', 'REGION_LEVEL'].includes(record.diffType)) {
        const toRegion = get(regionsMap.value, record.to?.region)
        return (
          <div class="changed-description is-region-level">
            <div>【{node?.node_name}】</div>
            <div class="changed-content">
              <span>
                {source?.region_name} L{record?.source?.level}
              </span>
              <ArrowRight class='mx-2' />
              <span>
                {toRegion?.region_name} L{record?.to?.level}
              </span>
            </div>
          </div>
        )
      }
      if (record.diffType === 'SORT') {
        return (
          <div class="changed-description is-region-level">
            <div>{node?.node_name}</div>
            <div>{source?.region_name}</div>
            <div>L{record?.source?.level}</div>
            <div class="changed-content">
              <span>位置: {record?.source?.index}</span>
              <ArrowRight class='mx-2' />
              <span>位置: {record.to?.index}</span>
            </div>
          </div>
        )
      }
    }
  }
})
